<template>
<div class="siders">
    <div class="logo">
        <img src="/static/images/logo.png"  />        
    </div>
    <div class="menubox">
        <a-menu :collapsed="collapsed" v-model:openKeys="openkeyss"  v-model:selectKeys="selectKeys" mode="inline" theme="dark" @click="toroutepath" class="leftmenu">
            <template v-for="item in menulist">
                <template v-if="item.children">
                    <a-sub-menu :key="item.path">
                        <template #icon>
                            <component :is="item.meta.icon"></component>
                        </template>
                        <template #title>
                            {{item.meta.title}}
                        </template>

                        <a-menu-item v-for="subitem in item.children" :key="subitem.path" >
                                <template #icon>
                                    <component :is="subitem.meta.icon"></component>
                                </template>
                                {{subitem.meta.title}}
                        </a-menu-item>
                    </a-sub-menu>
                </template>
                <template v-else>
                    <a-menu-item :key="item.path">
                        <template #icon>
                            <component :is="item.path.meta.icon"></component>
                        </template>
                        {{item.meta.title}}
                    </a-menu-item>
                </template>
            </template>
        </a-menu>
    </div>
</div>
</template>
<style lang="less" scoped>
.siders{
    padding:5px 0px;
    .logo{
        margin-bottom: 10px; height: 60px; line-height: 55px; text-align: center; border-bottom: solid 1px #555; position: relative;

        img{
            height: 38px; position: relative; right:12px;  
        }

        span.l1{
            height:28px; line-height: 28px; color:white; position: absolute; width:28px; text-align: center; font-size: 16px;
            top:15px;
        }

    }

    .menubox{
        padding:5px 10px;
    }

    .leftmenu{
        background: white;
    }

    .ant-menu-dark :deep(.ant-menu-inline.ant-menu-sub){
        background: none;
    }

    :deep(.leftmenu){
        background: none;
    }

}
</style>
<script>

import { defineComponent, reactive,ref,watch } from 'vue'
import { useStore } from 'vuex';
import {MenuFoldOutlined,MinusSquareOutlined,DiffOutlined,UserOutlined,TeamOutlined,UserSwitchOutlined,SettingOutlined,LockOutlined,BarChartOutlined,BarsOutlined,SnippetsOutlined,CopyOutlined} from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';



export default defineComponent({
    props:['openkeys'],    
    setup(props,context) {        
        //const menulist=store.state.auth.menulist;
        const store=useStore();
        const menulist=store.state.auth.menulist;
        const selectKeys=ref([]); 
        const route=useRoute();
        const router=useRouter();
        const collapsed=ref(false);
        const openkeyss=ref(['/setting']); 

        watch(
            ()=>route.path,
            ()=>{
                selectKeys.value=[route.path];
            }
        );

        const toroutepath = ({key}) => {            
            router.push(key);
        };

        const menuSizeChange= () =>{
            collapsed.value=!collapsed.value;            
        };
        
        return {
            selectKeys,menulist,toroutepath,collapsed,menuSizeChange,openkeyss
        };

    },
    components:{MenuFoldOutlined,MinusSquareOutlined,DiffOutlined,UserOutlined,TeamOutlined,UserSwitchOutlined,SettingOutlined,LockOutlined,BarChartOutlined,BarsOutlined,SnippetsOutlined,CopyOutlined}
});



</script>
